<template>
    <qly-select-popup ref="qlySelectPopupRef" title="选择月份" height="500rpx" @confirm="confirm">
        <picker-view :value="dataList" :indicator-style="indicatorStyle"
                     class="picker-view" @change="bindChange">
            <picker-view-column>
                <view class="item" v-for="(item,index) in 12" :key="index">{{ item }}</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in 12" :key="index">{{ item }}</view>
            </picker-view-column>
        </picker-view>
    </qly-select-popup>
</template>
<script setup>
const emits = defineEmits(['confirm'])
const indicatorStyle = ref(`height: 50px;`)
const qlySelectPopupRef = ref()

const startMonths = ref(0)
const dataList = ref([0, 0])


const bindChange = (e) => {
    console.log('e', e)
    startMonths.value = e.detail.value[0]
}

const open = () => {
    qlySelectPopupRef.value.open()
}

const close = () => {
    qlySelectPopupRef.value.close()
}

const confirm = () => {
    console.log(dataList.value)
    emits('confirm', dataList.value)
    close()
}

defineExpose({
    open
})
</script>
<style scoped lang="scss">
.picker-view {
    width: 750rpx;
    height: 400rpx;
    margin-top: 20rpx;
}

.item {
    line-height: 100rpx;
    text-align: center;
}
</style>
